<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<div v-if="crud.props.searchToggle">
				<!-- 搜索 -->
				<el-input v-model="query.name" clearable size="small" placeholder="输入姓名搜索" style="width: 100px;"
					class="filter-item" @keyup.enter.native="crud.toQuery" />
				<el-input v-model="query.idCardNo" clearable size="small" placeholder="输入身份证号搜索" style="width: 190px;"
					class="filter-item" @keyup.enter.native="crud.toQuery" />
				<el-input v-model="query.phone" clearable size="small" placeholder="输入联系电话搜索" style="width: 130px;"
					class="filter-item" @keyup.enter.native="crud.toQuery" />
				<el-select v-model="query.typeId" clearable filterable placeholder="贫困类型" class="filter-item">
					<el-option v-for="item in dict.student_type" :key="item.id" :label="item.label"
						:value="item.value" />
				</el-select>
				<el-select v-model="query.periodId" clearable filterable placeholder="参训期次" class="filter-item">
					<el-option v-for="item in periods" :key="item.periodId" :label="item.name" :value="item.periodId" />
				</el-select>
				<el-select v-model="query.classId" clearable filterable placeholder="培训分班" class="filter-item"
					style="width: 100px;">
					<el-option v-for="item in classes" :key="item.classId" :label="item.name" :value="item.classId" />
				</el-select>
				<el-select v-model="query.isPass" clearable filterable placeholder="通过培训" class="filter-item"
					style="width: 100px;">
					<el-option value="true" label="通过" />
					<el-option value="false" label="未通过" />
				</el-select>
				<el-select v-model="query.isSatisfy" clearable filterable placeholder="满意" class="filter-item"
					style="width: 100px;">
					<el-option value="true" label="满意" />
					<el-option value="false" label="不满意" />
				</el-select>
				<el-select v-model="query.isWorked" clearable filterable placeholder="就业状态" class="filter-item"
					style="width: 100px;">
					<el-option value="true" label="已就业" />
					<el-option value="false" label="未就业" />
				</el-select>
				<rrOperation />
			</div>
			<crudOperation :permission="permission" />
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="950px">
				<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">

					<el-row :gutter="0.5">
						<el-col :span="8">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="form.name" style="width: 200px;" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="身份证号">
								<el-input v-model="form.idCardNo" style="width: 200px;" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="联系电话">
								<el-input v-model="form.phone" style="width: 200px;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="8">
							<el-form-item label="学校">
								<el-input v-model="form.school" style="width: 200px;" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="学院">
								<el-select v-model="form.collegeId" filterable placeholder="请选择" class="input"
									style="width: 200px;" @change="loadMajorDeparts">
									<el-option v-for="item in colleges" :key="item.deptId" :label="item.name"
										:value="item.deptId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="专业">
								<el-select v-model="form.majorDepartId" filterable placeholder="请选择" class="input"
									style="width: 200px;">
									<el-option v-for="item in majorDeparts" :key="item.deptId" :label="item.name"
										:value="item.deptId" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="8">
							<el-form-item label="贫困类型">
								<el-select v-model="form.typeId" filterable placeholder="请选择">
									<el-option v-for="item in dict.student_type" :key="item.id" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="参训期次">
								<el-select v-model="form.periodId" filterable placeholder="请选择" class="input"
									style="width: 200px;">
									<el-option v-for="item in periods" :key="item.periodId" :label="item.name"
										:value="item.periodId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="培训分班">
								<el-select v-model="form.classId" clearable filterable placeholder="请选择">
									<el-option v-for="item in classes" :key="item.classId" :label="item.name"
										:value="item.classId" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="8">
							<el-form-item label="通过测试">
								<el-radio v-model="form.isPass" v-for="item in selTypeOptions" :key="item.key"
									:label="item.key">{{ item.display_name }}</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="满意">
								<el-radio v-model="form.isSatisfy" v-for="item in selTypeOptions" :key="item.key"
									:label="item.key">{{ item.display_name }}</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="已就业">
								<el-radio v-model="form.isWorked" v-for="item in selTypeOptions" :key="item.key"
									:label="item.key">{{ item.display_name }}</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="16">
							<el-form-item label="工作单位">
								<el-input v-model="form.workUnit" style="width: 500px;" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="状态">
								<el-radio v-model="form.enabled" v-for="item in dict.data_status" :key="item.id"
									:label="item.value">{{ item.label }}</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>
			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
				row-key="studentId" @select="crud.selectChange" @select-all="crud.selectAllChange"
				@selection-change="crud.selectionChangeHandler">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="period.name" label="参加培训期次" width="230" />
				<el-table-column prop="classModel.name" label="培训班级" width="80" align="center" />
				<el-table-column prop="name" label="姓名" width="80" />
				<el-table-column prop="school" label="学校" width="100" />
				<el-table-column prop="college.name" label="学院" width="130" />
				<el-table-column prop="majorDepart.name" label="专业" width="120" />
				<el-table-column prop="typeId" label="贫困类型" width="130">
					<template slot-scope="scope">
						{{ dict.label.student_type[scope.row.typeId] }}
					</template>
				</el-table-column>
				<el-table-column prop="isPass" label="通过培训测试" width="100" align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.isPass==true">是</div>
						<div v-if="scope.row.isPass==false" style="color: #FF4949">否</div>
					</template>
				</el-table-column>
				<el-table-column prop="isSatisfy" label="满意" width="80" align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.isSatisfy==true">是</div>
						<div v-if="scope.row.isSatisfy==false" style="color: #FF4949">否</div>
					</template>
				</el-table-column>
				<el-table-column prop="isWorked" label="已就业" width="80" align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.isWorked==true">是</div>
						<div v-if="scope.row.isWorked==false" style="color: #FF4949">否</div>
					</template>
				</el-table-column>
				<el-table-column prop="workUnit" label="工作单位" />
				<el-table-column prop="enabled" label="状态" width="80">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.enabled" active-color="#409EFF" inactive-color="#F56C6C"
							@change="changeEnabled(scope.row, scope.row.enabled,)" />
					</template>
				</el-table-column>
				<el-table-column v-if="checkPer(['admin','student:edit','student:del'])" label="操作" width="150px"
					align="center" fixed="right">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
	</div>
</template>

<script>
	import crudStudent from '@/api/student'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'
	import {
		getPeriods
	} from '@/api/period'
	import {
		getDepartments
	} from '@/api/department'
	import {
		getClasses
	} from '@/api/class'

	const defaultForm = {
		studentId: null,
		userId: null,
		name: null,
		school: null,
		collegeId: null,
		majorDepartId: null,
		phone: null,
		idCardNo: null,
		typeId: null,
		participationDate: null,
		isPass: null,
		isSatisfy: null,
		isWorked: null,
		enabled: 'true',
		workUnit: null
	}
	export default {
		name: 'Student',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['student_type', 'data_status', 'is_satisfy'],
		cruds() {
			return CRUD({
				title: '学生',
				url: 'api/student',
				idField: 'studentId',
				sort: 'periodId,studentId,asc',
				crudMethod: {
					...crudStudent
				}
			})
		},
		data() {
			return {
				periods: [],
				colleges: [],
				majorDeparts: [],
				classes: null,
				permission: {
					add: ['admin', 'student:add'],
					edit: ['admin', 'student:edit'],
					del: ['admin', 'student:del']
				},
				selTypeOptions: [{
						key: 'true',
						display_name: '是'
					},
					{
						key: 'false',
						display_name: '否'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				return true
			},
			[CRUD.HOOK.afterToCU](crud, form) {
				// 加载培训期次信息
				this.periods = [] // 先清空之前的培训期次信息
				var params = {
					enabled: true
				}
				// 加载培训期次信息
				getPeriods(params).then(res => {
					this.periods = res.content
					if (form.studentId == null)
						form.periodId = this.periods[0].periodId
					else {

						for (var i = 0; i < this.periods.length; i++) {
							if (this.periods[i].periodId == `${form.periodId}`)
								form.periodId = this.periods[i].periodId
						}
					}
				})

				//加载学院信息
				getDepartments({
					pid: null,
					enabled: true
				}).then(res => {
					this.colleges = res.content
					if (form.studentId == null) {
						form.collegeId = this.colleges[0].deptId
					} else {
						for (var i = 0; i < this.colleges.length; i++) {
							if (this.colleges[i].deptId == `${form.collegeId}`)
								form.collegeId = this.colleges[i].deptId
						}
						getDepartments({
							pid: form.collegeId,
							enabled: true,
						}).then(res => {
							this.majorDeparts = res.content
							for (var i = 0; i < this.majorDeparts.length; i++) {
								if (this.majorDeparts[i].deptId == `${form.majorDepartId}`)
									form.majorDepartId = this.majorDeparts[i].deptId
							}
						})
					}
				})

				//加载班级信息
				getClasses({
					enabled: true
				}).then(res => {
					this.classes = res.content
					console.log(this.classes)
					if (form.studentId) {
						for (var i = 0; i < this.classes.length; i++) {
							if (this.classes[i].classId == `${form.classId}`)
								form.classId = this.classes[i].classId
						}
					}
				})

				form.enabled = `${form.enabled}`
				if (form.studentId) {
					form.isPass = `${form.isPass}`
					form.isSatisfy = `${form.isSatisfy}`
					form.isWorked = `${form.isWorked}`
					form.typeId = `${form.typeId}`
				}
			},
			loadMajorDeparts(e) {
				this.majorDeparts = []
				if (e == null) return
				getDepartments({
					pid: e,
					enabled: true,
				}).then(res => {
					this.majorDeparts = res.content
				})
			},
			// 改变状态
			changeEnabled(data, val) {
				this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + ' 课程, 是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					crudCourse.edit(data).then(res => {
						this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE
							.SUCCESS)
					}).catch(err => {
						data.enabled = !data.enabled
						console.log(err.response.data.message)
					})
				}).catch(() => {
					data.enabled = !data.enabled
				})
			}
		}
	}
</script>

<style scoped>

</style>
